<template>
  <div class="mtype-container">
    <div class="mdata-notice" v-if="data.notice">
      <div class="mdata-notice-inner">
        {{data.notice.title}}
        {{data.notice.text}}
      </div>
    </div>
    <div class="mtype-form">
      <van-cell-group title="身份信息">
        <van-cell title="姓名" :value="formData.realname" />
        <van-cell title="身份证号" :value="formData.idcardno" />
        <van-cell title="手机号" :value="formData.mobile" />
      </van-cell-group>
      <van-cell-group title="工作信息">
        <van-cell title="职业" :value="formData.occupation" />
        <van-cell title="现工作单位/就读学校" :value="formData.organization" />
        <van-cell title="学历" :value="formData.qualification" />
        <van-cell title="个人月收入" :value="formData.income" />
      </van-cell-group>
      <van-cell-group title="地址信息">
        <van-cell title="地区" :value="addressText" />
        <van-cell title="详细地址" :value="formData.addressDetail" />
        <van-cell title="邮编" :value="formData.postalCode" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import {
  Row,
  Col,
  Cell,
  Button,
  CellGroup,
  Area,
  Icon,
  Image,
  Popup,
  Picker,
  Lazyload
} from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Area.name]: Area,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Image.name]: Image,
    [Picker.name]: Picker,
    Lazyload
  },

  data () {
    return {
      data: {
        fullData: {
          memberId: 0,
          typeId: 0,
          realname: '',
          idcardno: '',
          mobile: '',
          province: '',
          city: '',
          district: '',
          areaCode: '',
          postalCode: '',
          addressDetail: '',
          occupation: '',
          qualification: '',
          organization: '',
          income: '',
          code: ''
        }
      },
      disableSubmit: false
    }
  },

  created () {
    this.onLoad()
  },
  watch: {
    formData: {
      handler (cv, ov) {
        cv['addressText'] = this.addressText
      },
      deep: true
    }
  },
  computed: {
    formData () {
      return this.data.fullData
    },
    addressText () {
      var { province, city, district, areaCode } = this.data.fullData
      if (areaCode) {
        var arr = [province, city, district]
        if (province && province === city) {
          arr.splice(1, 1)
        }
        return arr
          .filter(function (text) {
            return text
          })
          .join('/')
      }
      return ''
    }
  },

  methods: {
    onLoad () {
      this.axios
        .get('/member/apply')
        .then(response => {
          if (response.data) {
            this.data = Object.assign({}, this.data, response.data)
            console.log(this.data)
            console.log(this.addressText)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onSubmit () {
      console.log(this.formData)
      this.validate((errors, fields) => {
        if (errors) {
          if (fields.length > 0) {
            let first = fields.shift()
            console.log(first)
            this.$refs[first.field].focus()
          }
          console.log(this.errorMsg)
        } else {
          this.submit()
        }
        console.log(fields)
      })
    },
    submit () {
      this.disableSubmit = true
      this.axios
        .post('/member/apply/create', this.apply)
        .then(response => {
          if (response.data) {
            this.$router.replace({ name: 'member' })
          } else {
            this.$toast('提交失败~')
            this.disableSubmit = false
          }
        })
        .catch(error => {
          this.disableSubmit = false
          this.$toast(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.mtype-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
}

.mdata-notice {
  padding: 15px;

  &-inner {
    padding: 15px;
    border: 1px solid #ff6600;
    background: #e3c184;
    border-radius: 5px;
  }
}

.van-cell-group {
  margin-bottom: 10px;
}
.mtype-action {
  padding: 15px;
  width: 100%;

  .van-button--default {
    background-color: #e3c184;
    border-color: #e3c184;
    color: #805916;
    border-radius: 5px;
  }
}

.mtype-notice {
  padding: 20px 15px;
  .van-cell {
    border-radius: 30px;
    background: #fcfaed;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 24px;
    &__left-icon {
      color: #ff5544;
    }
    &__right-icon {
      color: #f1b249;
    }
    &__title {
      color: #6d511f;
    }
    &__value {
      color: #f1b249;
    }
  }
}
.mtype-privilege {
  h1 {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7d5609;
    small {
      font-weight: normal;
      opacity: 0.9;
    }
    &::before,
    &::after {
      content: "";
      width: 3px;
      height: 10px;
      background: #dfc087;
      margin: 0 10px;
      border-radius: 3px;
      transform: rotate(30deg);
    }
  }
  &-list {
    flex-wrap: wrap;
    padding: 5px;
    .van-col {
      padding: 10px 5px;
      text-align: center;
      font-weight: 300;
    }
  }
}
</style>
